<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <br>
  性: <input type="text" v-model="person.firstName">
  <br>
  名: <input type="text" v-model="person.lastName">
  <br>
  全名: <input type="text" v-model="fullName">
  <br>
  全名: <h1>{{ fullName }}</h1>
</template>

<script>
  import { reactive, computed } from 'vue';
export default {
  name: 'App_计算属性computed',
  components: {

  },
  setup() {
  	let person = reactive({
  		firstName: 'zhang',
      lastName: 'san'
    });

  	// 简写形式
    // let fullName = computed(() => {
    // 	return person.firstName + '-' + person.lastName;
    // });

    // 完整写法
    let fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName;
      },

      set(value) {
        let nameArr = value.split('-');
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      }
    });

    return {
    	person,
    	fullName
    }
  }
}
</script>

<style>

</style>
